<template>
  <div
    class="w-full h-[281px] grid grid-rows-[55px_1fr_50px] font-[consola] rounded-[5px] bg-[#ecf0f1] hover:shadow-sm">
    <!-- header -->
    <div class="px-[20px] flex justify-between items-center rounded-t-[10px] border-b border-[#808080]-2">
      <!-- 标题 -->
      <TitleConfig />
      <div class="flex items-center gap-0.5">
        <!-- 计算按钮 -->
        <LjButton :disable="true" />

        <el-divider direction="vertical" />

        <LjButton type="danger" content="删除" />
        <LjButton type="success" content="选择" @click="check" />
      </div>
    </div>

    <!-- main -->
    <div class="grid grid-rows-[1fr_1fr] items-center">
      <!-- 导引绳及牵引绳 -->
      <SvgWire />

      <div class="grid grid-cols-3 items-center">
        <!-- 张力场 -->
        <ChangCard name="张力场" towerName="N1" distance="+100m" />

        <!-- -  --->
        <div class="flex justify-center items-center">
          <svg width="100" height="40" class="">
            <line x1="0" y1="20" x2="80" y2="20" stroke="#808080" stroke-width="3" />
            <path d="M80,10 L80,30 L100,20 Z" fill="#808080" />
            <text x="50" y="14" font-family="consola" font-size="12" fill="#808080" text-anchor="middle">1牵2</text>
          </svg>
        </div>

        <!-- 牵引场 -->
        <ChangCard name="牵引场" towerName="N2" distance="-100m" />
      </div>
    </div>

    <!-- footer -->
    <div class="px-[20px] rounded-b-[10px] flex justify-between border-t border-[#808080]-2">
      <!-- 张力整定值 -->
      <PowerCard name="张力整定值" value="2000" :isUnit="true">
        <Flirt theme="outline" size="20" fill="#d35400" />
      </PowerCard>

      <!-- 最大牵引力 -->
      <PowerCard name="最大牵引力" value="20000" :isUnit="true">
        <Fist theme="outline" size="20" fill="#d35400" />
      </PowerCard>

      <!-- 摩阻系数 -->
      <PowerCard name="摩阻系数" value="1.015" :isUnit="false">
        <SettingTwo theme="outline" size="20" fill="#d35400" />
      </PowerCard>
    </div>
  </div>
</template>

<script setup lang="ts">
import LjButton from '@/components/button/LjButton.vue'
import useCalculatePower from '@/composables/useCalculatePower'
import { Fist, Flirt, SettingTwo } from '@icon-park/vue-next'
import { ElMessage } from 'element-plus'
import TitleConfig from '../TitleConfig.vue'
import ChangCard from './ChangCard.vue'
import PowerCard from './PowerCard.vue'
import SvgWire from './SvgWire.vue'

const { configId } = defineProps({
  configId: { type: Number, default: 1 },
})

const { find: findPower } = useCalculatePower()

async function check() {
  ElMessage({ message: `成功选择${configId}`, type: 'success' })
  await findPower(configId)
}
</script>

<style></style>
